<style include="settings-shared iron-flex">
  iron-icon[icon='cr:add'] {
    --iron-icon-fill-color: var(--cros-icon-color-prominent);
    margin-inline-end: 8px;
  }
</style>
<settings-animated-pages id="pages" section="bluetooth">
  <div route-path="default">
    <os-settings-bluetooth-summary
        on-start-pairing="onStartPairing_"
        system-properties="[[systemProperties_]]">
    </os-settings-bluetooth-summary>
  </div>
  <template is="dom-if" route-path="/bluetoothDevices">
    <settings-subpage page-title="$i18n{bluetoothPageTitle}">
      <div slot="subpage-title-extra">
        <template is="dom-if"
            if="[[shouldShowPairNewDevice_(systemProperties_.*)]]" restamp>
          <cr-button id="pairNewDevice"
              on-click="onStartPairing_"
              class="cancel-button">
            <iron-icon icon="cr:add">
            </iron-icon>
            $i18n{bluetoothPairNewDevice}
          </cr-button>
        </template>
      </div>
      <os-settings-bluetooth-devices-subpage
          prefs="{{prefs}}"
          system-properties="[[systemProperties_]]">
      </os-settings-bluetooth-devices-subpage>
    </settings-subpage>
  </template>
  <template is="dom-if" route-path="/bluetoothDeviceDetail">
    <settings-subpage>
      <os-settings-bluetooth-device-detail-subpage
          system-properties="[[systemProperties_]]">
      </os-settings-bluetooth-device-detail-subpage>
    </settings-subpage>
  </template>
</settings-animated-pages>

<template is="dom-if" if="[[shouldShowPairingDialog_]]" restamp>
  <os-settings-bluetooth-pairing-dialog on-close="onClosePairingDialog_">
  </os-settings-bluetooth-pairing-dialog>
</template>
